<template>
    <div class="all">
        <p>直播课程</p>
        <!--        主体-->
        <div class="main">
            <!--            左-->
            <!--            外科-->
<!--            <img src="" alt="">-->
<!--            <div :style="{'backgroundImage':'url('../../../asets/1-class.png')',height:200px} "></div>-->
            <div class="main-left" :style="{backgroundImage:'url(' + imgs + ')'}">
                    <div class="left-black">
                        <!-- 阴影层-->
                        <h2>{{leftTitle}}</h2>
                        <h6>直播结束</h6>
                        <!-- 绿色按钮-->
                        <div class="button">直播结束</div>
                    </div>
            </div>
            <!--           右-->
            <div class="main-right">
                <li v-for="(v,i) of titleList" :key="i" @mouseenter="controlImg(v)"
                    :class="v.class?'right-hover':'none'">
                    <span>直播结束</span>
                    <i class="el-icon-circle-check"></i>
                    <a href="#">{{v.text}}</a>
                </li>
            </div>
        </div>
    </div>
</template>

<script>
    import img1 from "../../../assets/1-class.png"
    import img2 from "../../../assets/2-class.png"
    import img3 from "../../../assets/3-class.png"
    import img4 from "../../../assets/4-class.jpg"
    import img5 from "../../../assets/5-class.png"
    export default {
        name: "selectClass",
        data() {
            return {
                //操作所有的list
                titleList: [
                    {text: '求职技巧之重难点问题剖析与解决', class: true, img:img1},
                    {text: 'IT开发编程方向之职业规划', class: false, img: img2},
                    {text: '研究生复试之高效准备简历的方法', class: false, img: img3},
                    {text: '十大经典排序之Part-6-完结篇', class: false, img: img4},
                    {text: 'jdk1.8-新特性之函数式接口与方法引用', class: false, img: img5},
                ],
                //左边背景图片
                leftTitle: "求职技巧之重难点问题剖析与解决",
                imgs:img1
            }
        },
        methods: {
            //右方触发
            controlImg(data) {
                //设置触发时候的右边栏效果
                this.titleList.forEach(res => {
                    res.class = false
                })
                data.class = true
                //左边文字
                this.leftTitle = data.text;
                // 左边背景图片
                this.imgs=data.img;
            }
        },
        created() {
            // console.log(this.$store.state.isLogin)
            // this.$store.state.num
        }
    }
</script>

<style scoped lang="less">
    /*<!--    标题和总体 -->*/
    p {
        margin-bottom: 30px;
        text-align: center;

    }

    .all {
        width: 1200px;
        margin: auto;
        margin-top: 50px;
    }

    ;
    @colorGreen: #57d09a;
    /*主体部分*/
    .main {
        /*width: ;*/
        overflow: hidden;
        height: 350px;
        box-sizing: border-box;
    }

    /*主体左*/
    .main-left {
        width: 50%;
        height: 350px;
        box-sizing: border-box;
        float: left;
        /*    没有找到直接编辑的方法，用五个class凑合*/
        /*background-image: url("../assets/1-class.png");*/
        /*background-color: #42b983;*/
        /*黑色遮盖*/
        background-size: 100% 100%;

        .left-black {
            background: rgba(0, 0, 0, 0.42);
            height: 350px;
        }

        /*文字相关*/

        h2 {
            padding-top: 50px;
            margin-bottom: 30px;
        }

        h2,
        h6 {
            text-align: center;
            font-weight: 400;
            color: white;
        }

        .button {
            height: 48px;
            width: 148px;
            text-align: center;
            background: @colorGreen;
            margin: auto;
            margin-top: 35px;
            line-height: 48px;
            border-radius: 5px;
            color: white;
        }
    }

    /*主体右*/
    .main-right {
        width: 50%;
        height: 350px;
        float: left;
        box-sizing: border-box;
        /*padding: 20px 0 0;*/
        /*padding-left: 0;*/
        border: 1px solid #dbdbdb;
        background-color: #eeeeee;

        li {
            padding: 10px;
            padding-bottom: 20px;

            span {
                display: inline;
                padding: 20px;
                cursor: pointer;
            }

            a {
                text-decoration: none;
                color: black;
            }

            i {
                padding-right: 40px;
                font-weight: 700;
            }
        }
    }

    /*    主体右出操纵class*/
    .right-hover {
        box-sizing: border-box;
        border-left: 5px solid @colorGreen;
        background-color: white;

        span {
            padding-left: 15px !important;
        }

        span,
        i,
        a {
            color: rgb(5, 219, 149) !important;
        }
    }

    .none {
        border-left: none
    }
</style>